<template>
  <div>
    <div class="container clearfix">
      <div class="chat">

        <div class="chat-history">
          <ul id="list">
            <li>
              <div class="only-message-data">
                <span class="message-data-name"><i class="fa fa-circle online"></i> 管家</span>
                <div class="message-data-time">Today</div>
              </div>
              <div class="only-message">
                这里是您贴心的咨询管家,请在下方输入您的问题，或者发送“生成计划”，系统会自动帮您生成学习计划哦~


              </div>
            </li>
          </ul>
        </div> <!-- end chat-history -->

        <div class="chat-message clearfix">
          <input name="message-to-send" type="text" id="message-to-send" placeholder ="Type your message" v-model="messageToSend"></input>

          <i class="fa fa-file-o"></i> &nbsp;&nbsp;&nbsp;
          <i class="fa fa-file-image-o"></i>

          <button @click="init">Send</button>

        </div> <!-- end chat-message -->

      </div> <!-- end chat -->

    </div> <!-- end container -->

  </div>

</template>




<script>
import $ from 'jquery'

export default {
  name:"Chat",
  data(){
    return {
      time:'',
      flag:false,
      messageOutput:'',
      response:'',
      value:"",
      messageSave:'',
      messageToSend: '',
      messageResponses: [
        "请问需要哪个专业的学习计划呢？",
        "不好意思，我不理解，请换个提问词。",
        "1.学习Java编程语言：你需要学习Java语言的基本语法和特性，以及Java面向对象编程的概念和技巧。可以通过阅读Java相关的书籍、在线课程和视频来学习。\n2.掌握Java开发工具和框架：掌握Java开发工具和框架可以提高你的开发效率和代码质量。比如Eclipse、IntelliJ IDEA等集成开发环境，以及Spring、MyBatis、Hibernate等Java开发框架。\n3.实践项目：你需要在实践项目中应用所学的Java知识和技能。可以尝试做一些个人项目或者参加开源项目，这样可以积累经验，提高技能水平。\n4.参加培训和认证：参加Java相关的培训和认证可以增强你的技能和信心，也可以增加你的简历竞争力。比如Oracle提供的Java认证考试。\n5.拓展其他技能：Java程序员需要具备其他技能，比如数据库开发、Web开发、前端技术等，因此可以学习相关的技能，这样可以更好地适应工作需求和市场需求。\n6.参加Java社区和论坛：参加Java社区和论坛可以与其他Java程序员交流经验和技术，也可以了解最新的Java技术和趋势。\n7.最后，想要成为一名优秀的Java程序员，需要持续学习和实践，不断提高自己的技能和知识水平。\n",
        "前端和后端相比，需要学习的知识还是要少很多，如果你要入门后端，你要学习一大堆，但是你入门前端，只要把 HTML + CSS + js 这三门知识学习了，就基本差不多入门前端了，并且可以利用这三门知识，写出很多漂亮的交互页面，下面讲一讲这三门知识的学习。"
      ],
      // options: { valueNames: ['name'] },

    }
  },
  methods:{
    send(){
      // 追加文本
      var str = `<li class="clearfix">
        <div class="message-data align-right">
          <span class="message-data-time" >${this.time}, Today</span> &nbsp; &nbsp;
          <span class="message-data-name" >我</span> <i class="fa fa-circle me"></i>
        </div>
        <div class="message other-message float-right">
          ${this.messageToSend}
        </div>
      </li>`
      // console.log(str);
      this.$chatHistoryList =  this.$chatHistory.find('ul');
      // console.log(this.$chatHistoryList);
      this.$chatHistoryList.append(str)
      // document.getElementById('list').append(str)

    },
    sendresponse(){
      var str = `<li>
        <div class="message-data">
          <span class="message-data-name"><i class="fa fa-circle online"></i> 管家</span>
          <span class="message-data-time">${this.time}, Today</span>
        </div>
        <div class="message my-message">
          ${this.response}
        </div>
      </li>`
      this.$chatHistoryList =  this.$chatHistory.find('ul');
      this.$chatHistoryList.append(str)
    },
    sendCard(){
      var str = `<li>
        <div class="message-data">
          <span class="message-data-name"><i class="fa fa-circle online"></i> 管家</span>
          <span class="message-data-time">${this.time}, Today</span>
        </div>
        <div class="message my-message">
          <div class="card">
            <div class="header">
              <div class="image">
              </div>
              <span class="tag"></span>
            </div>
            <div class="info">
              <a rel="noopener noreferrer" href="http://localhost:8080/jihua" class="block">
                <span class="title">智能计划表</span>
                <p class="description">已生成您的专属计划表，点击文字前往查看计划表，快去打卡完成计划吧！加油哦...</p>
              </a>
            </div>
          </div>
        </div>
      </li>`

      this.$chatHistoryList =  this.$chatHistory.find('ul');
      console.log(this.$chatHistoryList);
      this.$chatHistoryList.append(str)
    },
    tosmartPlan(){
      // 这里为智能计划的路径
      console.log("ok");
      this.$router.push('/')
    },
    init(){
      this.cacheDOM();
      this.bindEvents();
      this.render();
    },
    cacheDOM(){
      this.$chatHistory = $('.chat-history');
      this.$button = $('button');
      this.$textarea = $('#message-to-send');
      this.$chatHistoryList =  this.$chatHistory.find('ul');
    },
    bindEvents(){
      // this.$button.onclick=this.addMessage();
      // this.$textarea.on('keyup', this.addMessageEnter.bind(this));
    },
    render(){
      this.scrollToBottom();
      if (this.messageToSend!== '') {
        //获取时间
        var time = this.getCurrentTime()
        this.time = time
        // console.log(this.messageToSend);
        this.messageSave = this.messageToSend
        //发送用户信息
        this.send()
        this.scrollToBottom();
        this.$textarea.val('');
        // console.log(this.messageToSend);
        if(this.messageSave.indexOf('生成计划') >-1){
          this.flag = true
          // this.messageOutput = this.messageToSend
          this.response = this.messageResponses[0]

          setTimeout(function() {
            this.sendresponse()
            this.scrollToBottom();
          }.bind(this), 1000);
        }else{
          //发送计划表
          if(this.flag){
            // 延迟多久回复
            setTimeout(function() {
              this.sendCard()
              this.scrollToBottom();
            }.bind(this), 800);
            this.flag = false
          }else{
            // 发送普通回答
            //判断具体回答哪个
            if(this.messageSave.indexOf('java')>-1){
              this.response = this.messageResponses.filter(item => item.includes('Java'))
              // console.log(this.messageResponses.filter(item => item.indexOf('Java')>-1));
            }else if(this.messageSave.indexOf('前端')>-1){
              this.response = this.messageResponses.filter(item => item.indexOf('前端')>-1)
            }else{
              this.response = this.messageResponses[1]
            }
            setTimeout(function() {
              this.sendresponse()
              this.scrollToBottom();
            }.bind(this), 800);
          }
        }
      }
    },
    //生成计划表调用接口
    create(){

    },
    // addMessage(){
    //   this.messageToSend = this.$textarea.val()
    //   console.log(this.messageToSend);
    //   this.render();
    // },
    // addMessageEnter(){
    //   if (event.keyCode === 13) {
    //       this.addMessage();
    //     }
    // },
    scrollToBottom(){
      this.$chatHistory.scrollTop(this.$chatHistory.prop('scrollHeight'));
    },
    getCurrentTime(){
      return new Date().toLocaleTimeString().
              replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3");
    },
    getRandomItem(){
      return arr[Math.floor(Math.random()*arr.length)];
    }
  }
}
</script>

<style scoped>
@import url('https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
@import url('../../assets/style.css');
</style>
